<template>
	<view>
		<van-tabs :active="orderactive" @change="orderChange()">
			<van-tab title="未完成">
				<block v-if="orderItem.length !== 0">
					<view class="orderItembox" v-for="(item,i) in orderItem" :key="i">
						<view class="orderItembox_item">
							<view class="orderItembox_item_title">
								<h1 style="width: 400rpx;">{{item.details[0].productName}}</h1>
								<text>未支付</text>
							</view>
							<view class="orderItembox_item_text">
								<text v-if="item.paymentType == 0">支付方式：线下</text>
								<text v-if="item.paymentType == 1">支付方式：小程序</text>
								<text v-if="item.paymentType == 2">支付方式：公众号</text>
								<text v-if="item.paymentType == 3">支付方式：H5</text>
								<text v-if="item.paymentType == 4">支付方式：PC</text>
								<text v-if="item.paymentType == 5">支付方式：支付宝</text>
								<text v-if="item.paymentType == 6">支付方式：余额</text>
								<text>订单编号：{{item.orderNum}}</text>
							</view>
							<view class="orderItembox_item_title orderItembox_item_title1">
								<h1 class="orderItembox_item_title_h1">{{item.createTime}}</h1>
								<view class="orderItembox_item_title_box">
									<text class="orderItembox_item_title_text">¥{{item.payPrice}}</text>
									<view class="orderItembox_item_title_btn" @click="paymentClick(item.id)">
										立即支付
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>

				<!-- 没有商品 -->
				<view class="nodetails" style="height: 510px" v-if="orderItem.length == 0">
					<view class="nodetails_img">
						<image
							src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/3a7b53543eb8e61ccf6b16369db10a00.png"
							mode="widthFix" class="maxImage"></image>
					</view>
					<text>暂时还没有订单哦...</text>
				</view>
			</van-tab>
			<van-tab title="已完成">
				<block v-if="orderItem.length !== 0">
					<view class="orderItembox" @click="navTo('/subpkg/myorder/myorder?id=' + item.id)"
						v-for="(item,i) in orderItem" :key="i">
						<view class="orderItembox_item">
							<view class="orderItembox_item_title">
								<h1>{{item.details[0].productName}}</h1>
								<text style="color: rgba(0, 186, 173, 1);">已支付</text>
							</view>
							<view class="orderItembox_item_text">
								<text v-if="item.paymentType == 0">支付方式：线下</text>
								<text v-if="item.paymentType == 1">支付方式：小程序</text>
								<text v-if="item.paymentType == 2">支付方式：公众号</text>
								<text v-if="item.paymentType == 3">支付方式：H5</text>
								<text v-if="item.paymentType == 4">支付方式：PC</text>
								<text v-if="item.paymentType == 5">支付方式：支付宝</text>
								<text v-if="item.paymentType == 6">支付方式：余额</text>
								<text>订单编号：{{item.orderNum}}</text>
							</view>
							<view class="orderItembox_item_title orderItembox_item_title1">
								<h1 class="orderItembox_item_title_h1">{{item.createTime}}</h1>
								<text class="orderItembox_item_title_text">¥{{item.payPrice}}</text>
							</view>
						</view>
					</view>
				</block>

				<!-- 没有商品 -->
				<view class="nodetails" style="height: 510px" v-if="orderItem.length == 0">
					<view class="nodetails_img">
						<image
							src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/3a7b53543eb8e61ccf6b16369db10a00.png"
							mode="widthFix" class="maxImage"></image>
					</view>
					<text>暂时还没有订单哦...</text>
				</view>
			</van-tab>
		</van-tabs>

	</view>
</template>

<script>
	import {
		getuserorderList,
		getordergopay
	} from '@/api/order.js'
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				orderactive: 0,
				orderList: [],
				orderItem: [],
				current: 1
			};
		},
		onLoad() {
			this.getorderList(this.orderactive)
		},
		methods: {
			...mapActions('m_user', ['getProvider']),
			getorderList(type) {
				const queryType = {
					status: type,
					current: this.current
				}
				getuserorderList(queryType).then(res => {
					// console.log(res)
					this.orderList = res.data
					this.orderItem = [...this.orderItem, ...res.data.records]
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			orderChange(e) {
				this.orderItem = []
				// console.log(e)
				this.orderactive = e.detail.name
				this.getorderList(this.orderactive)
			},
			paymentClick(id) {
				const that = this
				uni.showLoading({
					title: '加载中'
				});
				getordergopay(id).then(res => {
					// console.log(res)
					this.getProvider().then(provider => {
						// 调用微信支付
						// 仅作为示例，非真实参数信息。
						uni.requestPayment({
							provider: provider[0],
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								uni.hideLoading();
								that.$util.Tips({
									title: '支付成功！'
								})
								uni.redirectTo({
									url: '/subpkg/settlementyes/settlementyes?id=' +
										res.data.orderId
								})
							},
							fail: function(err) {
								uni.hideLoading();
								that.$util.Tips({
									title: '取消支付！'
								})
							}
						});
					})
				}).catch(err => {
					this.$util.Tips({
						title: err
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	/deep/ .van-tabs__line {
		background-color: #FDD338 !important;
		width: 30px !important;
		margin-left: 36px;
	}

	/deep/ .van-tabs__wrap {
		border-bottom: 1px solid #f1f1f1;
	}

	.orderItembox {
		padding: 34rpx 24rpx 20rpx;

		.orderItembox_item {
			// width: 702rpx;
			height: 346rpx;
			padding: 36rpx 46rpx 0;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20rpx;

			.orderItembox_item_title1 {
				margin-top: 26rpx;
			}

			.orderItembox_item_title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.orderItembox_item_title_h1 {
					font-size: 28rpx !important;
				}

				.orderItembox_item_title_text {
					font-size: 36rpx !important;
				}

				.orderItembox_item_title_box {
					display: flex;
					align-items: center;
				}

				.orderItembox_item_title_btn {
					margin-left: 30rpx;
					padding: 2rpx 25rpx;
					background-color: #fdd338;
					border-radius: 26.5rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 52rpx;
				}

				h1 {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					color: rgba(61, 61, 61, 0.9);
					font-size: 36rpx;
				}

				text {
					color: rgba(255, 102, 102, 1);
					font-size: 30rpx;
				}
			}
		}

		.orderItembox_item_text {
			display: flex;
			flex-direction: column;
			height: 142rpx;
			font-size: 28rpx;
			margin-top: 16rpx;
			border-bottom: 1px solid rgba(241, 241, 241, 1);

			text {
				margin-top: 16rpx;
				color: rgba(61, 61, 61, 0.6);
			}
		}
	}


	.nodetails {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-bottom: 128rpx;

		.nodetails_img {
			.maxImage {
				width: 184rpx;
				height: 322rpx;
			}
		}

		text {
			font-size: 30rpx;
			margin-top: 20rpx;
			color: rgba(61, 61, 61, 0.3);
		}
	}
</style>
